<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/29
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专辑展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" href="../layui/css/layui.css" rel="stylesheet">
    <script  src="/js/echarts.min.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <style type="text/css">
        .layui-table-cell{
            text-align:center;
            height: 80PX;
            white-space: normal;
        }
        .layui-table img{
            max-width: 100PX
        }
    </style>
    <script type="text/javascript">
        layui.use(['layer', 'form',"table","jquery","upload","element",'rate'], function(){
            var layer = layui.layer
            var form = layui.form;
            var table=layui.table
            var $=layui.jquery
            var upload = layui.upload;
            var rate = layui.rate;
            table.render({
                elem:"#album"
                ,url:"${pageContext.request.contextPath}/selectAlbumByPage"
                ,toolbar:"#toolbarDemo"
                ,page:true
                ,cols:[[
                    {field:"id",title:"编号",align:"center"}
                    ,{field:"name",title:"专辑名字",align:"center"}
                    ,{field:"author",title:"作者",align:"center"}
                    ,{field:"teller",title:"播音",align:"center"}
                    ,{field:"episodes",title:"集数",align:"center"}
                    ,{field:"date",title:"发行时间",align:"center"}
                    ,{field:"content",title:"内容",width: 100}
                    ,{title:"图片",templet:"#tupianTemplet",align:"center",width: 100}
                    ,{field:"star",title:"几星",templet:"#starTemplet",align:"center",width: 170}
                    ,{title:"操作",templet:"#caoZuoTemplet",align:"center",width: 170}
                ]]
                ,  done: function(res, curr, count){
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                    console.log(res.data);
                    for (var i=0;i<res.data.length;i++){
                        //渲染
                        var ins1 = rate.render({
                            elem: '#star'+res.data[i].id+''  //绑定元素
                            ,value: res.data[i].star //几星
                            ,readonly:true  //只读
                        });
                    }

                }
            })
            table.on('toolbar(albumFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                var name=$("#nameInput").val()
                if(obj.event=="switch"){
                    table.reload('album', {
                        where: {"name":name} //设定异步数据接口的额外参数
                    });
                }else if (obj.event=="add") {
                    //alert("ooo")
                    $("#addform")[0].reset()
                    layer.open({
                        type: 1,
                        content: $('#addform')
                       /* ,end:function(){
                            window.location.reload();
                        }*/
                    })

                }else if (obj.event === 'tongji') {
                    $.get("${pageContext.request.contextPath}/getAudioNumber",function (data) {
                        var myChart = echarts.init(document.getElementById('main'));
                        // 显示标题，图例和空的坐标轴
                        myChart.setOption({
                            backgroundColor: '#2c343c',

                            title: {
                                text: '统计专辑下音频',
                                left: 'center',
                                top: 20,
                                textStyle: {
                                    color: '#ccc'
                                }
                            },

                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },

                            visualMap: {
                                show: false,
                                min: 80,
                                max: 600,
                                inRange: {
                                    //colorLightness: [0, 1]
                                }
                            },
                            series: [
                                {
                                    name: '统计专辑下音频',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: [

                                    ].sort(function (a, b) { return a.value - b.value; }),
                                    roseType: 'radius',
                                    label: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        },
                                        smooth: 0.2,
                                        length: 10,
                                        length2: 20
                                    },
                                    itemStyle: {
                                        color: '#c23531',
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },

                                    animationType: 'scale',
                                    animationEasing: 'elasticOut',
                                    animationDelay: function (idx) {
                                        return Math.random() * 200;
                                    }
                                }
                            ]
                        });



                        // 填入数据
                        myChart.setOption({
                            series: [{
                                // 根据名字对应到相应的系列
                                data: data
                            }]
                        });


                        //弹框
                        layer.open({
                            type: 1,
                            content: $('#auidoForm'),
                            area:["500px","400px"]

                        })
                    })

                }else if (obj.event ==="zhu"){
                    $.get("${pageContext.request.contextPath}/getAudioNumberList",function (data) {
                        var myChart = echarts.init(document.getElementById('zhuzhuang'));
                    // 显示标题，图例和空的坐标轴
                        myChart.setOption({
                            title: {
                                text: '统计专辑下音频'
                            },
                            tooltip: {},
                            legend: {
                                data:['数量']
                            },
                            xAxis: {
                                data: []
                            },
                            yAxis: {},
                            series: [{
                                name: '数量',
                                type: 'bar',
                                data: []
                            }]
                        });

                        // 填入数据
                        myChart.setOption({
                            xAxis: {
                                //坐标轴斜着显示
                                axisLabel: {
                                    interval:0,
                                    rotate:40
                                },
                                data: data.name
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                name: '数量',
                                data: data.number
                            }]
                        });


                        //弹框
                        layer.open({
                            type: 1,
                            content: $('#zhuForm'),
                            area:["500px","400px"]

                        })
                    })
                }
                /*监听添加工具栏======end*/

            });


            /*监听提交======*/
            form.on('submit(submitFilter)', function(data){
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertAlbum",
                    data:data.field,
                    success:function (data) {
                        if (data.isAdd) {
                            //关闭弹出框
                            layer.closeAll()
                            //重载table
                            table.reload('album');
                        }else {
                            layer.open({
                                content:"输入有误,请重新输入"
                            });
                        }
                    }

                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
            /*监听提交======end*/

            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '${pageContext.request.contextPath}/uploadAlbum' //上传接口
                ,done: function(res){
                    console.log(res.image)
                    //上传完毕回调
                    $("#img").val(res.image)
                }
                ,error: function(){
                    //请求异常回调
                }
            });

            //监听行工具栏
            table.on('tool(albumFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/deleteAlbum",
                            data:{"id":data.id}
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //console.log(data.departmentId)
                    //发送ajax根据id查对象
                    $.ajax({
                        url:"${pageContext.request.contextPath}/selectOneAlbum"
                        ,data:{"id":data.id}
                        ,async: false
                        ,success:function (data) {
                            //给表单赋值
                            // alert(data)
                            form.val('updateFormFilter', data.album);

                        }
                    })
                    //弹出修改表单
                    layer.open({
                        type: 1,
                        content: $('#updateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        /*,end:function(){
                            window.location.reload();
                        }*/
                    });

                }else if (layEvent === 'zhuan') {
                    //alert(data.id+0.1)
                    window.parent.addTab(data.id+0.1,data.name,"/jsp/cmfz_audio.jsp?albumId="+data.id)

                }
            });
            /*//监听行工具栏=========end*/


            //执行实例
            var uploadInst = upload.render({
                elem: '#xiugai' //绑定元素
                ,url: '${pageContext.request.contextPath}/uploadAlbum' //上传接口
                ,done: function(res){
                    console.log(res.image)
                    //上传完毕回调
                    $("#img2").val(res.image)

                }
                ,error: function(){
                    //请求异常回调
                }
            });
            //监听修改状态修改表单内容
            form.on('submit(updateSubmitFilter)', function(data){
                /*console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/updateAlbum"
                    ,data:data.field
                    ,success:function (data) {
                        var msg="修改失败"
                        if (data.isUpdate) {
                            msg="修改成功"
                            layer.closeAll()
                            table.reload('album');
                        }
                        layer.msg(msg)
                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
           /* function addTab(id,name,url) {
                var $= layui.jquery
                var element = layui.element;

                if ($("li[lay-id='"+id+"']").length==0){
                    element.tabAdd('demo', {
                        title: name
                        ,content: '<iframe src='+url+' frameborder="0" id="demoAdmin" style="width: 100%; height: 500px;"></iframe>' //支持传入html
                        ,id: id
                    });
                    alert(id+" "+name+" "+url)
                }
                element.tabChange("demo", id);
            }*/

        });

    </script>

    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="starTemplet">
        <div id="star{{d.id}}"></div>
    </script>
    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="tupianTemplet">
        <img src="${pageContext.request.contextPath}/image/{{d.image}}">
    </script>
    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="caoZuoTemplet">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="zhuan">音频</a>
    </script>
    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">名字</label>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" placeholder="请输入名字" class="layui-input" id="nameInput">
            </div>
            <button class="layui-btn layui-btn-sm" lay-event="switch">查询</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="tongji">饼状图统计专辑下音频</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="zhu">柱状图统计专辑下音频</button>
        </div>
    </script>
</head>
<body>
<table id="album" lay-filter="albumFilter"></table>


<%--//柱状图--%>
<form style="display: none" id="zhuForm">
    <div id="zhuzhuang" style="width: 500px;height:400px;"></div>
</form>
<%--//饼状图--%>
<form style="display: none" id="auidoForm">
    <div id="main" style="width: 500px;height:400px;"></div>
</form>
<!--//添加表单-->
<form class="layui-form" style="display: none;" id="addform" lay-filter="formFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">专辑名字:</label>
        <div class="layui-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入科室名称"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者:</label>
        <div class="layui-inline">
            <input type="text" name="author" placeholder="请输入办公室电话" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">播音:</label>
        <div class="layui-inline">
            <input type="text" name="teller" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">集数:</label>
        <div class="layui-inline">
            <input type="text" name="episodes" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发行时间:</label>
        <div class="layui-inline">
            <input type="date" name="date" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容:</label>
        <div class="layui-inline">
            <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传图片:</label>
        <div class="layui-inline">
            <input type="hidden" id="img"  name="image" value="">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">几星:</label>
        <div class="layui-inline">
            <input type="text" name="star" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>


<!--//修改表单-->
<form class="layui-form" style="display: none;" id="updateForm" lay-filter="updateFormFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">专辑名字:</label>
        <div class="layui-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者:</label>
        <div class="layui-inline">
            <input type="text" name="author" placeholder="请输入" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">播音:</label>
        <div class="layui-inline">
            <input type="text" name="teller" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">集数:</label>
        <div class="layui-inline">
            <input type="text" name="episodes" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">发行时间:</label>
        <div class="layui-inline">
            <input type="date" name="date" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容:</label>
        <div class="layui-inline">
            <textarea name="content" placeholder="请输入内容" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传图片:</label>
        <div class="layui-inline">
            <input type="hidden" id="img2"  name="image" value="">
            <input type="hidden" name="id" value="">
            <button type="button" class="layui-btn" id="xiugai">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">几星:</label>
        <div class="layui-inline">
            <input type="text" name="star" placeholder="请输入所在区域" lay-verify="required"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
</body>
</html>
